<template>
	<view>
		<image class="bg" src="../../static/uimage/sucai.jpg"></image>
		<view class="loginIn-page">
			<view class="iamage">
				<image src="../../static/uimage/car.svg"></image>
			</view>
			<view class="login">
				<view class="login-inp">
					<input placeholder-class="ps" placeholder="新密码为不低于8位的数字字母组合"/>
					<view class="tip"></view>
				</view>
				<view class="login-inp">
					<input placeholder-class="ps" placeholder="确认密码" />
				</view>
				<navigator open-type="switchTab" url="home"  class="login-next">
					确认
				</navigator>
				<!-- <button class="login-next">确认</button> -->
			</view>
		</view>
	</view>		
</template>

<script>
	export default {
		name:"loginIn-component"
	}
</script>

<style>
	.iamage image{
		width: 300rpx;
		height: 300rpx;
	}
	.bg{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.loginIn-page{
		/* 定位可以改变区域大小至全屏 */
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0);
		
		/* 弹性容器 */
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}
	.login{
		width: 90%;
		height: 70%;
		/* a就是透明度 0完全透明~1不透明 */
		background-color: rgba(255, 255, 200,0);
		/* 设置圆角 */
		border-radius: 50rpx;
		/* 弹性容器 */
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
	}
	/* 标题 */
	.login-title{
		font-size: 40rpx;
		color: #FFCF4A;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}
	/* 输入框 */
	.login-inp{
		/* 字体默认大小40rpx + 20*2rpx + 4*2rpx = 88rpx */
		display: flex;
		align-items: center;
		border: 4rpx solid black;
		padding: 20rpx;
		/* 设置圆角 */
		border-radius: 54rpx ;
		/* 设置长度 */
		width: 80%;
		margin-bottom: 0rpx;
		margin-top:100rpx ;
		background-color: rgba(255,255,255,0.95);
	}
	.login-inp image{
		width: 50rpx;
		height: 50rpx;
		flex: 1;
	}
	.login-inp input{
		flex: 5;
	}
	/* 提示文字的颜色 */
	.ps{
		font-weight: bold;
	}
	/* 按钮 */
	.login-btn{
		margin-top: 50rpx;
		width: 70%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: rgba(244,206,82,0.95);;
		color: white;
		border-radius: 44rpx;
	}
	.login-next{
		display: flex;
		justify-content: center;
		margin-top: 200rpx;
		width: 70%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: rgba(244,206,82,0.95);
		color: white;
		border-radius: 44rpx;
		font-size: 40rpx;
		}
		.VC{
			font-size: 21rpx;
		}
</style>